<template>
    <div class="main-banner">
        <h1>智能转换,快且安全</h1>
        <div class="des">
            支持多种格式互相转换，支持图片、视频、音频、文档等格式转换，支持批量上传文件,安全纯净快速，<br/>打造极致的在线文件转换体验。
        </div>
        <div class="tool">
            <AvatarGroup
                :max-count="3"
                v-if="false"
                max-popover-trigger="click"
                size="large"
                :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' }"
            >
                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                <Avatar style="background-color: #f56a00">K</Avatar>
                <Avatar>Z</Avatar>
                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                <Avatar style="background-color: #f56a00">K</Avatar>
                <Avatar style="background-color: #f56a00">K</Avatar>
                <Tooltip title="Ant User" placement="top">
                    <Avatar style="background-color: #87d068">
                        <template #icon><UserOutlined /></template>
                    </Avatar>
                </Tooltip>
                <Avatar style="background-color: #1890ff">
                    <template #icon><AntDesignOutlined /></template>
                </Avatar>
            </AvatarGroup>
            <Button size="large" type="primary" class="banner_btn" >开始试用</Button>
        </div>
        
    </div>
</template>
<script lang="ts" setup>
import {Button,AvatarGroup,Avatar,Tooltip} from 'ant-design-vue'
import {AntDesignOutlined,UserOutlined} from '@ant-design/icons-vue'
</script>
<style lang="scss" scoped>
    .main-banner {
        padding: 60px 0px;
        width: $content-body-width;
        margin: 0px auto;
        text-align: center;
        h1{
            font-size: 3.75rem;
            line-height: 1.25!important;
            unicode-bidi: isolate;
            font-weight: 800;
            margin-bottom: 1.5rem;
            display:block;
            overflow-wrap: break-word;
            word-break: break-word;
            margin-bottom: 40px;
        }
        .des{
            line-height: 1.8;
        }
        .tool{
            margin: 20px 0;
            display: flex;
            justify-content: center;
            button{
                margin-left: 10px;
                &:first-child{
                    margin-left: 0;
                }
            }
            .banner_btn{
                width: 10rem;
                font-size: 1rem;
                font-weight: 500;
                line-height: 1.5;
                @include font_color('main-btn-bg-font');
                @include background_color('main-btn-bg');
                @include border_color('main-btn-border');
            }
        }
    }
</style>